<template>

  <div class="ss12" v-if="this.flag">
    <div class="ss11" v-for="(item,index) in list" :key="index">
      <div @click="clickItem(item)">{{ item.dictValue }}</div>
    </div>
    <div class="ss11" style="border: none;">
      <span @click="add" style="color: #6698ff;">+ &ensp;{{ $t('text.System.l7') }}</span>
    </div>
  </div>


  <el-dialog
      v-model="DialogVisible"
      width="500px"
      append-to-body
      :show-close="true"
      align-center
      @close="closeDialog"
  >
    <template #header>
      <div style="margin-right: 10px;font-size: 18px">{{ isDetele ? title : addTitle }}</div>
      <div v-show="isDetele" class="d1">
        <!--      <div v-if="true" class="d1">-->
        <el-popover :visible="visible" placement="top" :width="160">
          <p>{{  $t('text.System.l263')  }}</p>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false">{{  $t('text.System.l264')  }}</el-button>
            <el-button size="small" type="primary" @click="deleteDict"
            >{{  $t('text.System.l265')  }}
            </el-button
            >
          </div>
          <template #reference>
            <!--          <el-button @click="visible = true">Delete</el-button>-->
            <div style="display: flex;flex-direction: row;flex-wrap: nowrap" @click="visible=true">
              <div class="d2">{{ deleteTitle }}</div>
              <img class="d3" src="../../../assets/images/de.svg">
            </div>
          </template>
        </el-popover>
      </div>
    </template>
    <div>
      <div class="t1">
        <div class="t2" style="margin-right: 10px">{{ leftTitle }}:</div>
        <el-input v-model="value" placeholder=""/>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{  $t('text.System.l264')  }}</el-button>
        <el-button type="primary" @click="confirm">
          {{  $t('text.System.l265')  }}
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="delFail"
      width="400px"
      append-to-body
      :show-close="true"
      align-center
      @close="closeDialog"
  >
    <template #header>
      <div style="margin-right: 10px;font-size: 17px;">{{ delFailTitle }}</div>
    </template>
    <span class="delContext">
      {{  $t('text.System.l266')  }}{{ delItemName }}{{ delContextTitle1 }},
    </span>
    <span class="delContext" v-show="delContextTitle1 !== ''">
      {{  $t('text.System.l267')  }}{{ delContextTitle1 }}？
    </span>
    <div>
      <div class="t1">
        <div class="t2" style="margin-right: 10px">{{ delFailLeftTitle }}:</div>
        <el-select v-model="selectValue" class="m-2" :placeholder="$t('text.System.l268')" size="small">
          <el-option
              v-for="item in selectList"
              :key="item.dictValue"
              :label="item.dictValue"
              :value="item.dictValue"
          />
        </el-select>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="delFailCancel">{{  $t('text.System.l264')  }}</el-button>
        <el-button size="small" style="color:#fff;" type="primary" @click="delFailConfirm" color="rgb(236, 128, 141)">
          {{  $t('text.System.l269')  }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {addDict, changeDict, delDict, dictHouse, updateDict} from '../../../http/api'
import {ElMessage} from 'element-plus'
import {translate as $t} from "@/language";

export default {
  name: 'DialogLayout23',
  emits: ['returnData'],
  components: {},
  props: {
    title: String,
    leftTitle: String,
    hit: String,
    deleteTitle: String,
    typeCode: String,
    addTitle: String,
    delFailTitle: String,
    delFailLeftTitle: String,
    delContextTitle1: {
      String,
      default: ''
    }
  },
  data() {
    return {
      isClose: false,
      inputValue: '',
      visible: false,
      DialogVisible: false,
      isDetele: true,//默认显示删除
      flag: false,
      list: [],
      value: '',
      oldValue: '',
      dictName: '',
      delFail: false,
      delItemName: '',
      selectValue: '',
      selectList: []
    }
  },
  created() {
    this.dictHouse()
  },
  mounted() {
  },
  methods: {
    $t,
    clickItem(item) {
      // console.log(item)
      this.value = item.dictValue
      this.oldValue = item.dictValue
      this.dictName = item.dictName
      this.DialogVisible = true
    },
    add() {
      //添加请求不显示删除按钮
      this.isDetele = false
      this.DialogVisible = true
    },
    confirm() {

      //如果显示了删除按钮就是修改，然则就是添加
      if (this.isDetele === true) {
        let data = {
          newValue: this.value,
          oldValue: this.oldValue,
          typeCode: this.typeCode
        }
        // console.log(data)
        this.updateDict(data)
      } else if (this.isDetele === false) {
        let data = {
          dictName: this.value,
          typeCode: this.typeCode
        }
        this.addDict(data)
      }

    },
    delFailConfirm() {
      if (this.selectValue === '') {
        ElMessage.error(this.$t('text.System.l270') + this.delContextTitle1)
        return
      }
      let data = {
        newValue: this.selectValue,
        oldValue: this.oldValue,
        typeCode: this.typeCode
      }
      // console.log('data', data)
      this.changeDict(data)
    },
    cancel() {
      //说明是点击添加后没做操作返回返回
      if (this.isDetele === false) {
        let that = this
        setTimeout(function () {
          that.isDetele = true
        }, 500)
      }
      this.DialogVisible = false
      this.visible = false
      this.oldValue = ''
      this.value = ''
      this.dictName = ''
    },
    delFailCancel() {
      this.delFail = false
      this.value = ''
      this.oldValue = ''
      this.dictName = ''
    },
    closeDialog(){
      // console.log('closeDialog')
      //说明是点击添加后没做操作返回返回
      if (this.isDetele === false) {
        let that = this
        setTimeout(function () {
          that.isDetele = true
        }, 500)
      }
      this.DialogVisible = false
      this.visible = false
      this.oldValue = ''
      this.value = ''
      this.dictName = ''
    },
    addDict(data) {
      // console.log('data',data)
      addDict(data).then(res => {
        // console.log('res',res)
        if (res === null || res === '') {
          this.DialogVisible = false
          this.value = ''
          this.oldValue = ''
          this.dictName = ''
          this.isDetele = true
          ElMessage.success(this.$t('text.System.l271'))
          this.dictHouse()
        } else {
          this.DialogVisible = false
          this.value = ''
          this.oldValue = ''
          this.dictName = ''
          this.isClose = true
          ElMessage.error(this.$t('text.System.l272'))
        }
      })
    },
    updateDict(data) {
      updateDict(data).then(res => {
        if (res === null || res === '') {
          // this.input = ''
          // this.inputValue = ''
          // this.isClose = true
          this.oldValue = ''
          this.value = ''
          this.dictName = ''
          this.visible = false
          this.DialogVisible = false
          this.dictHouse()
          ElMessage.success(this.$t('text.System.l271'))
        } else {
          this.oldValue = ''
          this.value = ''
          this.dictName = ''
          this.visible = false
          this.DialogVisible = false
          ElMessage.error(this.$t('text.System.l272'))
        }
      })
    },
    deleteDict() {
      // console.log('删除事件')
      // console.log('this.typeCode',this.typeCode)
      // console.log('this.typeCode',this.dictName)
      let data = {
        dictName: this.dictName,
        typeCode: this.typeCode
      }
      console.log('data',data)
      delDict(data).then(res => {
        // console.log('res',res)
        if (res === false) {
          //TODO 删除失败跳转
          this.visible = false
          this.DialogVisible = false
          this.delFail = true
        } else {
          //删除成功
          ElMessage.success(this.$t('text.System.l273'))
          this.value = ''
          this.oldValue = ''
          this.dictName = ''
          this.visible = false
          this.DialogVisible = false
          this.dictHouse()
        }
      })
    },
    changeDict(data) {
      changeDict(data).then(res => {
        // console.log('res',res)
        if (res === '') {
          ElMessage.success(this.$t('text.System.l273'))
          this.value = ''
          this.oldValue = ''
          this.dictName = ''
          this.visible = false
          this.DialogVisible = false
          this.delFail = false
          this.dictHouse()
        }
      })
    },
    dictHouse() {
      dictHouse().then(res => {
        // console.log('res',res)
        for (let item in res) {
          if (item === this.typeCode) {
            this.list = res[`${this.typeCode}`]
          }
        }
        this.flag = true
        // console.log('111',this.list)
        if (this.typeCode==='businessScope'){
          console.log('111',this.list)
        }
      })

    },
  },
  watch: {},
  computed: {}

}
</script>

<style scoped>

::v-deep(.el-dialog__header) {
  justify-content: space-between;
  display: flex;
}

.t1 {
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.t2 {
  color: gray;
  font-size: 12px;
  white-space: nowrap;
}

.d1 {
  display: flex;
  align-items: center;
  position: absolute;
  top: 19px;
  right: 45px;
}

.d2 {
  color: #ff4b4b;
}

.d3 {
  width: 25px;
  height: 25px;
}

.ss12 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss11 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
}

.delContext {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(236, 128, 141);
  font-size: 14px
}

</style>